<template>
  <div class="active">
     <el-row>
      <el-button class="xinzeng" @click="eminct"
        >新增</el-button
      >
    </el-row>
    <el-table
      :data="list"
      style="width: 100%"
       :default-sort = "{prop: 'order', order: 'ascending'}">>
      <el-table-column
        prop="order"
        label="排序"
        width="130">
      </el-table-column>
      <el-table-column

        label="缩略图"
        width="180">
      <template v-slot="{row}">
        <el-image :src="row.bannerUrl"></el-image>
      </template>
      </el-table-column>
      <el-table-column
        prop="title"
        label="标题"
       >
      </el-table-column>
      <el-table-column
        prop="link"
        label="链接地址">
      </el-table-column>
          
          <el-table-column
        label="是否启用">
        <template v-slot="{row}">
        <el-switch
  v-model="row.status"
  active-color="#ff7144"
   @change="forbidden(row)"
>
</el-switch>
        </template>
    </el-table-column>
      <el-table-column
        label="操作"
        width="230">
        <template v-slot="{row}">
        <el-button type="text" size="small" @click="compile(row)">编辑</el-button>
        <el-button type="text" size="small" @click="xremove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>  
        <!-- 分页 -->
    <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination> 
    <!-- 新增编辑 -->
      <el-dialog :title="isedit ? '编辑': '添加'"
       :destroy-on-close="true" 
       :close-on-click-modal='false'
       :visible.sync="outerVisible" 
       v-if="outerVisible">
       <keep-alive>
    <Mantearsean class="aiopedg" @close='outer' :isedit="isedit" :childata='childata'></Mantearsean>
    </keep-alive>
</el-dialog>
  </div>
</template>

<script>
import Mantearsean from './components/Mantearsean.vue'
import {userbanner,bannerremove,banneropen,bannerclose} from '@/api/user'
export default {
  components: { Mantearsean },
data() {
        return {
          isedit:false,
          outerVisible:false,
          list: [],
          childata:{},
          q:{
            index:1,
            size:5
          }
        }
      },
      created(){
        this.loachplay()
      },
      
      methods:{
        // 渲染列表
       async loachplay(){
       const res = await userbanner(this.q)
       this.list = res.data.data
        },
          // 关闭组件
       outer(){
          this.outerVisible = false
         this.loachplay()
         },
          // 编辑
        compile(row){
          this.childata = row
          this.outerVisible = true
           this.isedit = true
        },
          // 新增
        eminct(){
    this.outerVisible = true
    this.isedit = false
        },
        // 删除
       xremove(row){
         this.$confirm("您确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("bannerId", row.id); //
          const res = await bannerremove(params);
           this.loachplay()
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
       },
        // 启用 禁用
   async forbidden(row){
      if(row.status == false){
          const params = new URLSearchParams();
        params.append("bannerId",row.id);
        const rea = await banneropen(params)
        this.$message.success(rea.msg)
        this.loachplay()
      } else{
          const paramd = new URLSearchParams();
        paramd.append("bannerId",row.id);
        const rem = await bannerclose(paramd)
        this.$message.success(rem.msg)
        this.loachplay()
      }
    },
             // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachplay();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachplay();
    },
      }

}
</script>

<style scoped>
.active{
  background-color: #fff;
  padding-left: 30px;
}
.xinzeng {
    background: linear-gradient(90deg, #ff7144 0%, #ff7144 100%);
    border: 1px solid #ff7144;
  margin: 30px 0 30px 0;
  color: #fff;
}
::v-deep .el-dialog {
  width: 30% !important;
}
</style>